var Canvas = {}; //命名空、空间
/*
        1.初始化
        2.画出小圆点 运动
        3.原点连线
        4.鼠标与小圆点的关系
        */
Canvas.animate = {
	//星空特效
	//作者：JHT
	//更新时间：20118/1/16
	adjIfo: {
		num: 130,
		colorList: ["blue", "purple", "white"],
		speed: 5,
		moonStyle: 6,
		dotColor: 'pink',
		dotSize: 0.5,
		dotStyle: 1,
		lineDotL: 50,
		lineMousL: 200
	},

	init: function() {

		//                picBox=document.getElementById("moon");
		//                var img=new Image();
		//                var urlStr='./image/moon/moon'+this.adjIfo.pic+'.png';
		//                img.src=urlStr;
		//                picBox.appendChild(img);
		document.getElementById("moonPic").src = './image/moon/moon' + this.adjIfo.moonStyle + '.png';

		var canvas = document.getElementById("canvas");
		this.cxt = canvas.getContext("2d");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		this.num = this.adjIfo.num;
		this.data = []; //存储圆点初始化坐标点
		this.cw = canvas.width;
		this.ch = canvas.height;
		this.mouseX = 0;
		this.mouseY = 0;

		for(var i = 0; i < this.num; i++) { //循环遍历，生成每一个随机坐标
			this.data[i] = {
				x: Math.random() * this.cw,
				y: Math.random() * this.ch,
				//自定义速度增量
				cX: Math.random() * this.adjIfo.speed - this.adjIfo.speed / 2,
				cY: Math.random() * 0.6 - 0.3
			};

		}

		onmousemove = function(e) {
			Canvas.animate.mouseX = e.clientX;
			Canvas.animate.mouseY = e.clientY;
		};

		//        addEventListener("moseMove",function(e){
		//                         console.log(""+e.clientX+e.clientY);
		//                         });

		var dragdiv = document.getElementById("moon");
		var x, y; //记录到点击时鼠标到移动框(内框）左边和上边的距离

		dragdiv.addEventListener('dragstart', function(e) {
			//      e.dataTransfer.effectAllowed = "copy";  //移动效果

			e.dataTransfer.setData("text", ''); //附加数据，　没有这一项，firefox中无法移动
			x = e.offsetX || e.layerX;
			y = e.offsetY || e.layerY;
			return true;
		}, false);

		document.addEventListener('dragover', function(e) { //取消冒泡 ,不取消则不能触发 drop事件
			e.preventDefault() || e.stopPropagation();
		}, false);

		document.addEventListener('drop', function(e) {
			//      dragdiv.style.left = (e.pageX - x) + 'px';
			//      dragdiv.style.top = (e.pageY - y) + 'px';
			e.preventDefault() || e.stopPropagation(); //不取消，firefox中会触发网页跳转到查找setData中的内容
		}, false);

		dragdiv.ondrag = function(e) {
			dragdiv.style.left = (e.pageX - x) + 'px';
			dragdiv.style.top = (e.pageY - y) + 'px';
		}

		window.onresize = function() {
			var canvas = document.getElementById("canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}

		return "测试一下闭包";
	},

	drawCir: function(x, y) {
		var cxt = this.cxt;
		cxt.save();
		if(this.adjIfo.dotStyle) {
			cxt.fillStyle = this.adjIfo.dotColor;
			cxt.beginPath();
			cxt.arc(x, y, this.adjIfo.dotSize, Math.PI * 2, false);
			cxt.closePath();
			cxt.fill();
			cxt.restore();
		} else {
			cxt.strokeStyle = this.adjIfo.dotColor;
			cxt.beginPath();
			cxt.arc(x, y, this.adjIfo.dotSize, Math.PI * 2, false);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();

		}

	},

	drawLine: function(x1, y1, x2, y2) {

		var cxt = this.cxt;
		var color = cxt.createLinearGradient(x1, y1, x2, y2);
		for(var cor in this.adjIfo.colorList)
			color.addColorStop(cor / this.adjIfo.colorList.length, this.adjIfo.colorList[cor])

		cxt.save();
		cxt.strokeStyle = color;
		cxt.beginPath();
		cxt.moveTo(x1, y1);
		cxt.lineTo(x2, y2);
		cxt.closePath();
		cxt.stroke();
		cxt.restore();

	},

	moveCir: function() {
		this.cxt.clearRect(0, 0, this.cw, this.ch);
		//速度牵引量

		//                this.drawLine(200,200,400,400)

		for(var i = 0; i < this.num; i++) {
			this.data[i].x += this.data[i].cX;
			this.data[i].y += this.data[i].cY;
			//边界判断
			if(this.data[i].x > this.cw || this.data[i].x < 0)
				this.data[i].cX = -this.data[i].cX;
			if(this.data[i].y > this.ch || this.data[i].y < 0)
				this.data[i].cY = -this.data[i].cY;

			//绘制粉点
			this.drawCir(this.data[i].x, this.data[i].y);
			//用勾股定理判断是否连线
			for(var j = i + 1; j < this.num; j++) {
				if((this.data[i].x - this.data[j].x) * (this.data[i].x - this.data[j].x) +
					(this.data[i].y - this.data[j].y) * (this.data[i].y - this.data[j].y) <=
					this.adjIfo.lineDotL * this.adjIfo.lineDotL)
					this.drawLine(this.data[i].x, this.data[i].y, this.data[j].x, this.data[j].y);
				//                      console.log(""+this.data[i].x+"  "+this.data[i].y+"   "+this.data[j].x+"   "+this.data[j].y);       
			}

			if((this.data[i].x - this.mouseX) * (this.data[i].x - this.mouseX) +
				(this.data[i].y - this.mouseY) * (this.data[i].y - this.mouseY) <=
				this.adjIfo.lineMousL * this.adjIfo.lineMousL)
				//                          this.drawLine(this.data[i].x,this.data[i].y,screenX,screenY);
				//                            console.log(""+pageXOffset+"   "+pageYOffset);

				this.drawLine(this.data[i].x, this.data[i].y, this.mouseX, this.mouseY);

		}
	},

	adjAply: function(adjust) {
		for(var adj in adjust)
			this.adjIfo[adj] = adjust[adj];
		this.init();
	}

};

function change() {
	var form = document.getElementById("adjustForm");
	var adj = {};

	if(form.num.value)
		adj.num = form.num.value;
	if(form.speed.value)
		adj.speed = form.speed.value;
	if(form.dotColor.value)
		adj.dotColor = form.dotColor.value;
	if(form.dotSize.value)
		adj.dotSize = form.dotSize.value;
	if(form.lineDotL.value)
		adj.lineDotL = form.lineDotL.value;
	if(form.lineMousL.value)
		adj.lineMousL = form.lineMousL.value;

	adj.moonStyle = form.moonStyle.value;
	adj.dotStyle = form.dotStyle.value == "scroke" ? 0 : 1;

	if(form.colorList.value)
		adj.colorList = form.colorList.value.split(",");

	console.log(adj);

	Canvas.animate.adjAply(adj);
}




Canvas.animate.init();
//Canvas.animate.drawCir();

window.onresize = function() {
	Canvas.animate.init();
};

(function animloop() {
	window.requestAnimationFrame(animloop);
	Canvas.animate.moveCir();
})();